import React, { ReactElement } from 'react';
import { View, ViewStyle } from 'react-native';
import { Surface, Shape, Path } from '@react-native-community/art';

import { phonePx } from '../../../../../util/adapt';
import { CLASS_ROOM_RIGHT_SCALE } from '../../../constant';
import styles from './style';

export enum DirectType {
  Unknown,
  Left,
  Top,
  Right,
  Bottom
}

interface SendMsgProps {
  style?: ViewStyle | ViewStyle[];
  fillColor?: string;
  children?: any;
  dia?: number;
  surfaceWidth?: number;
  surfaceHeight?: number;
  directWidth?: number;
  directHeight?: number;
  directType?: DirectType;
  directLocation?: number;
}

const SURFACE_WIDTH = phonePx(78) * CLASS_ROOM_RIGHT_SCALE;
const SURFACE_HEIGHT = phonePx(30) * CLASS_ROOM_RIGHT_SCALE;
const DIRECT_WIDTH = phonePx(12) * CLASS_ROOM_RIGHT_SCALE;
const DIRECT_HEIGHT = phonePx(6) * CLASS_ROOM_RIGHT_SCALE;

export default ({
  style,
  fillColor = '#FDD753',
  children,
  dia = phonePx(8) * CLASS_ROOM_RIGHT_SCALE,
  surfaceWidth = SURFACE_WIDTH,
  surfaceHeight = SURFACE_HEIGHT,
  directWidth = DIRECT_WIDTH,
  directHeight = DIRECT_HEIGHT,
  directType = DirectType.Bottom,
  directLocation
}: SendMsgProps): ReactElement => {
  const width = directLocation || (surfaceWidth - directWidth) / 2;
  const height = directLocation || (surfaceHeight - directWidth) / 2;
  const bottom = new Path()
    .moveTo(dia, 0)
    .lineTo(surfaceWidth - dia, 0)
    .arc(dia, dia, dia)
    .lineTo(surfaceWidth, surfaceHeight - dia)
    .arc(-dia, dia, dia)
    .lineTo(surfaceWidth - width, surfaceHeight)
    .lineTo(directWidth / 2 + width, surfaceHeight + directHeight)
    .lineTo(width, surfaceHeight)
    .lineTo(dia, surfaceHeight)
    .arc(-dia, -dia, dia)
    .lineTo(0, dia)
    .arc(dia, -dia, dia)
    .close();

  const left = new Path()
    .moveTo(dia + directHeight, 0)
    .lineTo(surfaceWidth + directHeight - dia, 0)
    .arc(dia, dia, dia)
    .lineTo(surfaceWidth + directHeight, surfaceHeight - dia)
    .arc(-dia, dia, dia)
    .lineTo(dia + directHeight, surfaceHeight)
    .arc(-dia, -dia, dia)
    .lineTo(directHeight, height + directWidth)
    .lineTo(0, height + directWidth / 2)
    .lineTo(directHeight, height)
    .lineTo(directHeight, dia)
    .arc(dia, -dia, dia)
    .close();

  const top = new Path()
    .moveTo(dia, directHeight)
    .lineTo(width, directHeight)
    .lineTo(directWidth / 2 + width, 0)
    .lineTo(width + directWidth, directHeight)
    .lineTo(surfaceWidth - dia, directHeight)
    .arc(dia, dia, dia)
    .lineTo(surfaceWidth, surfaceHeight + directHeight - dia)
    .arc(-dia, dia, dia)
    .lineTo(dia, surfaceHeight + directHeight)
    .arc(-dia, -dia, dia)
    .lineTo(0, dia + directHeight)
    .arc(dia, -dia, dia)
    .close();

  const right = new Path()
    .moveTo(dia, 0)
    .lineTo(surfaceWidth - dia, 0)
    .arc(dia, dia, dia)
    .lineTo(surfaceWidth, height)
    .lineTo(surfaceWidth + directHeight, height + directWidth / 2)
    .lineTo(surfaceWidth, height + directWidth)
    .lineTo(surfaceWidth, surfaceHeight - dia)
    .arc(-dia, dia, dia)
    .lineTo(dia, surfaceHeight)
    .arc(-dia, -dia, dia)
    .lineTo(0, dia)
    .arc(dia, -dia, dia)
    .close();

  let shapeD = bottom;
  if (directType === DirectType.Left) {
    shapeD = left;
  } else if (directType === DirectType.Top) {
    shapeD = top;
  } else if (directType === DirectType.Right) {
    shapeD = right;
  }

  return (
    <View style={style}>
      <Surface
        width={
          directType === DirectType.Right || directType === DirectType.Left
            ? surfaceWidth + directHeight
            : surfaceWidth
        }
        height={
          directType === DirectType.Top || directType === DirectType.Bottom
            ? surfaceHeight + directHeight
            : surfaceHeight
        }
      >
        <Shape d={shapeD} fill={fillColor} />
      </Surface>
      <View
        style={[
          styles.content,
          directType === DirectType.Left && {
            left: directHeight
          },
          directType === DirectType.Top && {
            top: directHeight
          },
          {
            width: surfaceWidth,
            height: surfaceHeight
          }
        ]}
      >
        {children}
      </View>
    </View>
  );
};
